<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .refresh {
            display: inline-block;
            float: right;
        }

        .form-group {
            margin-bottom: 40px;
        }
    </style>
    <link rel="shortcut icon" href="/images/index/logo.ico">
</head>
<body>

<div class="refresh">
    <button class="btn btn-info search" title="刷新" data-url="/themeScreenshot/user/add?tid=${tid}"><span
            class="glyphicon glyphicon-refresh"></span></button>
</div>
<span id="data-tid" hidden>${tid}</span>
<div class="" style="margin-bottom: 65px;">
    <ol class="breadcrumb">
        <li><a href="javascript:;">主题案例管理</a></li>
        <li><a data-url="/themeAdmin/user/list">主题上传</a></li>
        <li><a data-url="/themeScreenshot/user/list?tid=${tid}">主题截图编辑</a></li>
        <li class="active">主题截图添加</li>
    </ol>
</div>
<form class="form-horizontal" action="/themeScreenshot/user/submit" method="post" enctype="multipart/form-data">

    <div class="form-group">
        <label for="inputFile" class="col-sm-2 control-label">截图添加</label>
        <div class="col-sm-10">
            <input type="file" id="inputFile" class="hidden" name="images" required>
            <a class="btn btn-info scr_img"><span class="glyphicon glyphicon-picture"></span> 添加图片</a>
        </div>
        <div class="col-sm-10 first_img col-sm-offset-2" style="margin-top: 20px;">
            <img src="" alt="" class="" width="200px" height="400px">
        </div>
    </div>
    <div class="form-group">
        <label for="inputTitle" class="col-sm-2 control-label">截图标题</label>
        <div class="col-sm-3">
            <input name="tid" value="${tid}" hidden>
            <input type="text" class="form-control" id="inputTitle" name="name" placeholder="截图标题请不要超过10个汉字"
                   maxlength="10" required>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEn" class="col-sm-2 control-label">截图标题英文</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="inputEn" name="sname" placeholder="截图标题英文请不要超过20个英文单词"
                   maxlength="20"
                   required>
        </div>
    </div>
    <div class="form-group">
        <label for="inputIntro" class="col-sm-2 control-label">主题创意说明</label>
        <div class="col-sm-3">
            <textarea class="form-control" rows="3" id="inputIntro" name="content" placeholder="创意说明,请不要超过100个汉字"
                      maxlength="100"
                      required></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="color" class="col-sm-2 control-label">背景颜色</label>
        <div class="col-sm-3">
            <input type="color" class="form-control" id="color" name="color" placeholder="请选择背景颜色值"
                   maxlength="20"
                   required>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default submit">确定</button>
        </div>
    </div>
</form>
<script src="/sources/dist/js/jquery.form.js"></script>
<script src="/sources/dist/js/submitForm.js"></script>
<script>
    $(document).ready(function () {
        operate_btn();
        $('.first_img').hide();
        $('.scr_img').click(function () {
            $('#inputFile').trigger('click');
        });

        $('#inputFile').change(function (e) {
            img_show($(this), $('.first_img img'));
            $('.first_img').show()
        });


//       图片提交
        function img_show(obj, img_class) {
            var reader = new FileReader();
            var files = obj[0].files[0];
            reader.onload = function (e) {
                var imgFile = e.target.result;
                img_class.attr('src', imgFile);
            };
            reader.readAsDataURL(files);
        }

    });
</script>
</body>
</html>